<template>
	<u-overlay :show="show" @click="handleClose">
		<view v-if="odata" class="bg-fff pop-cont" @tap.stop>
			<view class="flex padding u-border-bottom">
				<image class="poster margin-right" :src="odata.img" mode="aspectFill"></image>
				<view class="fs-24">
					<view class="">
						{{odata.name}}
					</view>
					{{odata.french}}
					<view class="margin-tb-xs">
						￥{{odata.list[dropIdx].price}}
					</view>
					<text class="iconfont icon-canju"></text>
					{{odata.list[dropIdx].fittings}}
				</view>
			</view>
			<view class="flex justify-between padding u-border-bottom">
				<text>规格选择</text>
				<view class="spec-cont">
					<view @tap="listShow=!listShow">
						{{odata.list[dropIdx].spec}}
						({{odata.list[dropIdx].weight}})
						 - 
						 {{odata.list[dropIdx].edible}}
						<text class="iconfont icon-xiala"></text>
					</view>
					<view v-if="listShow" class="spec-list bg-fff my-shadow">
						<view v-for="(item,index) in odata.list" @tap="handleDrop(index)" :class="{'bg-grey':index==dropIdx}" class="padding-sm">
							{{item.spec}}({{item.weight}}) - {{item.edible}}
						</view>
					</view>
				</view>
			</view>
			<view class="flex justify-between padding">
				<text>数量选择</text>
				<u-number-box v-model="num" :min="1" :max="100" buttonSize="20"></u-number-box>
			</view>
			<view class="flex btn-cont">
				<view  @tap="handleClose" class="bg-grey padding">
					取消
				</view>
				<view @tap="handleOk" class="bg-yellow padding">
					确认
				</view>
			</view>
		</view>
	</u-overlay>
</template>

<script>
	export default {
		name:"good-spec",
		data() {
			return {
				listShow:false,
				dropIdx:0,  //被选中下拉规格序号
				num:1 //商品数量
			};
		},
		computed: {
			show() {
				return this.$store.state.cart.show 
			},
			odata(){ //弹窗商品数据
				return this.$store.state.cart.overlayData
			}
		},
		created(){
			console.log('弹窗组件显示了');
			if(!this.odata){return} //弹窗未显示的容错处理
			let {dropIdx,num} = this.odata
			if(dropIdx){ //判断新增、编辑
				this.dropIdx = dropIdx
				this.num = num
			}
		},
		methods: {
			handleClose() {
				this.$store.commit('cart/cartOverlayMut',false)
			},
			handleDrop(idx){ //规格选择
				this.dropIdx = idx
				this.listShow = false
			},
			handleOk(){ //商品添加
				let obj = {...this.odata}
				obj.dropIdx = this.dropIdx
				obj.id = obj.list[this.dropIdx].id //将商品id换为规格id
				obj.num = this.num
				this.$store.commit('cart/cartAddMut',obj)
				this.handleClose()
			}
		},
	}
</script>

<style lang="scss">
.pop-cont{
	position: absolute;
	top: 50%;
	left: 3%;
	width: 94%;
	box-sizing: border-box;
	transform: translateY(-50%);
}
.poster{
	height: 160upx;
	width: 160upx;
}
.btn-cont{
	view{
		width: 50%;
		text-align: center;
	}
}
.spec-cont{
	position: relative;
	.spec-list{
		position: absolute;
		right: 0;
		top: 70upx;
		z-index: 2;
		width: 400upx;
	}
}
</style>
